<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link rel="stylesheet" th:href="@{/frontstatic/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/global.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/login.css}">
    <script charset="utf-8" th:src="@{lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.form.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/login.js}"></script>
    <script charset="utf-8" th:src="@{../lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <title>云上商城 - 登录 / 注册</title>
    <style type="text/css">
        #bodydivfrmant {
            background-image: url("images/bodydiv.jpg");
        }
    </style>
</head>
<body>
<div class="public-head-layout container">

</div>
<div id="bodydivfrmant" style="height:600px">
    <div class="login-layout container">
        <div class="form-box login" style="margin-top: 50px;margin-right: 150px;width: auto">
            <div style="width: 345px;height:100%;display: inline-block">
                <div style="width: 100%;position: relative;left: 50px;top: -94px;float: left">
                    <img src="/images/usetLog.png" style="float: left;width:200px;height:200px">
                </div>
            </div>
            <div class="tabs_container" style="display: inline-block;width: 300px">
                <form action="" style="height: 325px" class="tabs_form" id="login_form" method="post">
                    <div style="font-size: 23px">登录</div>
                    <div class="form-group" style="margin-top: 40px">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span aria-hidden="true" class="glyphicon glyphicon-phone"></span>
                            </div>
                            <input autocomplete="off" class="form-control phone" id="login_phone" maxlength="11" name="phone" placeholder="手机号" required type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span aria-hidden="true" class="glyphicon glyphicon-lock"></span>
                            </div>
                            <input autocomplete="off" class="form-control password" id="login_pwd" name="password" placeholder="请输入密码" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span aria-hidden="true" class="glyphicon glyphicon-eye-open"></span></div>
                        </div>
                    </div>
                    <button class="layui-btn layui-btn-normal" style="width: 100%;margin-top: 30px" id="login_submit" type="button">
                        登录
                    </button>
                    <br>
                    <p class="text-center" style="margin-top: 10px"><a href="javascript:;" style="color: #005980" id="register">免费注册</a></p>
                </form>
            </div>
        </div>
        <div class="form-box register" style="margin-top: 50px">
            <div class="tabs-nav">
                <h2>欢迎注册<a class="pull-right fz16" href="javascript:;" style="color: #005980"  id="reglogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" style="height: 325px" id="register_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span aria-hidden="true" class="glyphicon glyphicon-phone"></span>
                            </div>
                            <input autocomplete="off" class="form-control phone" id="register_phone" maxlength="11"
                                   name="phone" placeholder="手机号" required type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span aria-hidden="true" class="glyphicon glyphicon-lock"></span>
                            </div>
                            <input autocomplete="off" class="form-control password" id="register_pwd" name="password"
                                   placeholder="请输入密码" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    aria-hidden="true" class="glyphicon glyphicon-eye-open"></span></div>
                        </div>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="register_error"></div>
                    </div>

                    <button class="layui-btn layui-btn-normal" style="width: 100%;margin-top: 30px" id="submitadd" type="button">
                        注册
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        // 判断直接进入哪个页面 例如 login.php?p=register
        switch ($.getUrlParam('p')) {
            case 'register':
                $('.register').show();
                break;
            case 'resetpwd':
                $('.resetpwd').show();
                break;
            default:
                $('.login').show();
        };
    });
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    //注册
    $('#submitadd').click(function () {
        var form = $(this).parents('form')
        var phone = form.find('input.phone');
        var pwd = form.find('input.password');
        var error = form.find('.error_msg');
        var success = form.siblings('.tabs_div');
        var MembetVo={
            "phone":$("#register_phone").val(),
            "password":$("#register_pwd").val()
        }
        $.ajax({
            type : "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(MembetVo),
            dataType: "json",
            url:"/users/addUsers",
            async : true,
            success : function(date){
                if (date.code==0) {
                    notify.success(date.msg)
                    $("#register_phone").val("")
                    $("#register_pwd").val("")
                }else {
                    notify.error(date.msg)
                }
            }
        })
    })
    //登录
    $("#login_submit").on('click', function () {
        var login_pwd = $("#login_pwd").val()
        var login_phone = $("#login_phone").val()
        $.post("/users/LoginUsers", {"phone": login_phone, "pwd": login_pwd}, function (ex) {
            if (ex.code==0) {
                notify.success(ex.msg)
                window.location.href = "/skiphtml/index"
            } else {
                notify.error(ex.msg)
            }
        })
    })
</script>
</body>
</html>